<template>
    <div class="dateComputed">
       <div class="cBox" ref="top">
          <!-- 这是时间的计算器 -->
          <h3 class="title">计算两个日期之间差多少天</h3>
          <div class="c"> 
              <el-date-picker v-model="daTda" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <el-button type="primary" @click="handleClickFirst">计算</el-button>
          </div>
          <h3 class="title">推算几天后的日期</h3>
          <div  class="cb">
            <div>
                <el-date-picker v-model="da"  type="date"  placeholder="选择日期"></el-date-picker>
            </div>
              <div>
                  <el-input placeholder="请输入内容" v-model="inputDa" clearable></el-input>
              </div>
              <el-button type="primary" @click="handleClickTwn">计算</el-button>
          </div>
       </div>

        <div v-if="tg" class="result" >
          <div class="jg">结果</div>
          <div class="content" >
            {{content}}
          </div>
        </div>
    </div>

</template>
<style scoped>
.dateComputed {
  width: 100%;
}
.title {
  font-weight: bold;
  color: #333333;
  font-size: 24px;
  text-align: center;
}
.result {
  position: absolute;
  height: 180px;
  text-align: center;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 24px 0 0 0;
  width: 100%;
  bottom: 0;
  right: 0;
}
.jg {
  height: 50px;
  font-size: 30px;
  font-weight: 600;
}
.content {
  color: #333333;
}
.cBox {
  height: 200px;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  transition: all .8s;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  z-index:1;
}
.c {
  text-align: center;
}
.cb {
  display: flex;
  justify-content: center;
}
</style>


<script>
  export default {
    data() {
      return {
        daTda: '',
        da: '',
        inputDa: '',
        content:'',
        tg:false
      }
    },
    methods: {
      handleClickFirst(e){
        let dateObjS=new Date(this.daTda[0]);
        let dateObjE=new Date(this.daTda[1]);
        let xc=dateObjE.getTime()-dateObjS.getTime()
        let xcDay=xc/(24*60*60*1000)
        this.content=xcDay+'天';
        console.log('计算',xcDay)
        this.$refs.top.style="top:100px"
        this.tg=true;
        setTimeout(()=>{
          this.$refs.top.style=""
          this.tg=false;
        },6000);
      },
      handleClickTwn(e){
        let dateObjS=new Date(this.da).getTime();
        console.log(this.inputDa)
        let inputD=this.inputDa*(24*60*60*1000)
        let tody=new Date(dateObjS+inputD)
        this.content=tody.toLocaleString();
        this.$refs.top.style="top:100px"
        this.tg=true;
        setTimeout(()=>{
          this.$refs.top.style=""
          this.tg=false;
        },6000);
        console.log('计算2',tody)
      }
    }
  }
</script>